<template>
  <div class="bottom">
    <mu-bottom-nav :value.sync="active">
      <mu-bottom-nav-item v-for="(item,index) in nav" :key="index" :title="item.name"
                          :icon="item.icon" :to="item.to" :value="item.to"></mu-bottom-nav-item>
    </mu-bottom-nav>
  </div>
</template>

<script>
  export default {
    name: "commonDown",
    components: {},
    created() {
      this.actives()
    },
    data() {
      return {
        active: '/',
        nav: [
          {name: '首页', icon: 'home', to: '/'},
          {name: '发现', icon: 'touch_app', to: '/find'},
          {name: '消息', icon: 'fiber_new', to: '/news'},
          {name: '我的', icon: 'person', to: '/my'}
        ]
      }
    },
    methods: {
      actives() {
        if (this.$route.path === this.nav[0].to) {
          this.active = this.nav[0].to
        }
        if (this.$route.path === this.nav[1].to) {
          this.active = this.nav[1].to
        }
        if (this.$route.path === this.nav[2].to) {
          this.active = this.nav[2].to
        }
        if (this.$route.path === this.nav[3].to) {
          this.active = this.nav[3].to
        }
      }
    }
  }
</script>

<style scoped>
  .bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
</style>
